<template>
  <div>
 

    <div class="demo-vertical-spacing" style="height:500px">
      <div id="echartContainer" style="width:100%; height:100%"></div>
    </div>

  </div>
</template>

<style>
.echarts {
  height: 300px !important;
  width: 100% !important;
}
</style>

<script>
// import ECharts from 'vue-echarts/components/ECharts.vue'

// import 'echarts/lib/chart/line'
// import 'echarts/lib/chart/bar'
// import 'echarts/lib/chart/pie'
// import 'echarts/lib/component/tooltip'
// import 'echarts/lib/component/legend'

let echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/bar");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/toolbox");
require("echarts/lib/component/legend");
require("echarts/lib/component/markLine");

export default {
  name: "ApiCallCountBar",
  metaInfo: {
    title: "Vue Echarts - Charts"
  },
  components: {},
  data: () => ({}),
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("echartContainer"));
    //console.log("ddddddd");
    // 绘制图表
    myChart.setOption({
      title: {
        text: "接口调用次数"
       
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow"
        }
      },
      legend: {
        data: ["内部调用", "外部调用"]
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
      },
      yAxis: {
        type: "value",
       
      },
      xAxis: {
        type: "category",
        data: ["工商信息", "涉诉接口", "金融黑名单", "逾期查询", "质押信息", "房产信息"]
      },
      series: [
        {
          name: "内部调用",
          type: "bar",
          barGap: 0,
          data: [1820, 2348, 2903, 1497, 1374, 6323]
        },
        {
          name: "外部调用",
          type: "bar",
          data: [193, 234, 310, 1215, 1341, 681]
        }
      ]
    });
  }
};
</script>
